<template>
  <div class="Vxe">
    <vxe-toolbar>
      <template #buttons>
        <vxe-button @click="$refs.xTable.toggleCheckboxRow(tableData[1])">切换第二行选中</vxe-button>
        <vxe-button @click="$refs.xTable.setCheckboxRow([tableData[2], tableData[3]], true)">设置第三、四行选中</vxe-button>
        <vxe-button @click="$refs.xTable.setAllCheckboxRow(true)">设置所有行选中</vxe-button>
        <vxe-button @click="$refs.xTable.clearCheckboxRow()">清除所有行选中</vxe-button>
        <vxe-button @click="toggleSeqFixed">切换第一固定列</vxe-button>
        <vxe-button @click="$refs.xTable.toggleRowExpand(tableData[1])">切换第二行展开</vxe-button>
        <vxe-button @click="$refs.xTable.setRowExpand([tableData[0], tableData[1]], true)">设置第一、二行展开</vxe-button>
        <vxe-button @click="$refs.xTable.setAllRowExpand(true)">设置所有行展开</vxe-button>
        <vxe-button @click="$refs.xTable.clearRowExpand()">关闭所有行展开</vxe-button>
      </template>
    </vxe-toolbar>
    <p>
      <template v-for="(column,index) in columns">
        <vxe-checkbox v-if="column.title" v-model="column.visible" :key="index">{{ column.title }}</vxe-checkbox>
      </template>
      <vxe-button @click="$refs.xTable.refreshColumn()">刷新列信息</vxe-button>
      <vxe-button @click="$refs.xTable.resetColumn()">重置自定义列</vxe-button>
    </p>
    <vxe-table
      border
      class="checkbox-table"
      ref="xTable"
      @current-change="currentChange"
      @toggle-row-expand="toggleExpandChangeEvent"
      row-id="id"
      :expand-config="{expandRowKeys: ['10001']}"
      :row-config="{isCurrent: true, isHover: true}"
      :data="tableData">
      <vxe-column type="checkbox" width="60" :fixed="seqFixed"></vxe-column>
      <vxe-column field="name" title="Name" min-width="300"></vxe-column>
      <vxe-column field="sex" title="Sex" min-width="300"></vxe-column>
      <vxe-column field="age" title="Age" min-width="300"></vxe-column>
      <vxe-column type="expand" width="80" fixed="right">
        <template #content="{ row, rowIndex }">
          <div v-if="rowIndex === 1" class="expand-wrapper">
            <vxe-table
              border
              :data="tableData">
              <vxe-column field="role" title="Role"></vxe-column>
              <vxe-column field="address" title="Address"></vxe-column>
            </vxe-table>
          </div>
          <div v-else class="expand-wrapper">
            <ul>
              <li>
                <span>ID：</span>
                <span>{{ row.id }}</span>
              </li>
              <li>
                <span>Name：</span>
                <span>{{ row.name }}</span>
              </li>
              <li>
                <span>UpdateTime：</span>
                <span>{{ row.age }}</span>
              </li>
              <li>
                <span>CreateTime：</span>
                <span>{{ row.address }}</span>
              </li>
            </ul>
          </div>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>

export default {
  name: "Vxe",
  components: {},
  data() {
    return {
      seqFixed: null,
      columns: [],
      tableData: [
        { id: 10001, name: "Test1", role: "Develop", sex: "Man", age: 28, address: "test abc", checked: false },
        { id: 10002, name: "Test2", role: "Test", sex: "Women", age: 22, address: "Guangzhou", checked: false },
        { id: 10003, name: "Test3", role: "PM", sex: "Man", age: 32, address: "Shanghai", checked: false },
        { id: 10004, name: "Test4", role: "Designer", sex: "Women", age: 23, address: "test abc", checked: false }
      ]
    };
  },
  methods: {
    currentChange({row}) {
      this.$refs.xTable.clearCheckboxRow();
      this.$nextTick(() => {
        this.$refs.xTable.setCheckboxRow([row], true);
      });
    },
    toggleSeqFixed() {
      this.seqFixed = this.seqFixed ? null : "left";
      this.$nextTick(() => {
        this.$refs.xTable.refreshColumn();
      });
    },
    toggleExpandChangeEvent({ row, expanded }) {
      console.log("行展开事件" + expanded);
    }
  },
  mounted() {
    // 获取所有列配置
    this.$nextTick(() => {
      this.columns = this.$refs.xTable.getColumns()
    })
  }
};
</script>

<style>
.Vxe {
  padding: 20px;
}
</style>